import QtQuick 2.3
import QtQuick.Window 2.0
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import "."
import "../../javascript/Utils.js" as UtilsJS

ListView {
    width: parent.width
    visible: true;
    spacing:  UtilsJS.dp2px(2)

    property alias items: listModel
    property bool updating: false

    model: ListModel {
        id:listModel
        ListElement {_id: "0"; nome: "SuperBox Brasil"; descricao: "7 Km\n22 Produtos";}
        ListElement {_id: "0"; nome: "Extra"; descricao: "15 Km\n23 Produtos";}
        ListElement {_id: "0"; nome: "Pão de Açúcar"; descricao: "18 Km\n27 Produtos";}
        ListElement {_id: "0"; nome: "Macro"; descricao: "25 Km\n36 Produtos";}
        ListElement {_id: "0"; nome: "Bom a Bessa"; descricao: "6 Km\n15 Produtos";}
        ListElement {_id: "0"; nome: "Atacadão"; descricao: "21 Km\n32 Produtos";}
        ListElement {_id: "0"; nome: "Híper"; descricao: "10 Km\n42 Produtos";}
        ListElement {_id: "0"; nome: "Carrefour"; descricao: "11 Km\n48 Produtos";}
        ListElement {_id: "0"; nome: "Carrefour"; descricao: "11 Km\n48 Produtos";}
        ListElement {_id: "0"; nome: "Carrefour"; descricao: "11 Km\n48 Produtos";}
        ListElement {_id: "0"; nome: "Carrefour"; descricao: "11 Km\n48 Produtos";}
        ListElement {_id: "0"; nome: "Carrefour"; descricao: "11 Km\n48 Produtos";}
        ListElement {_id: "0"; nome: "Carrefour"; descricao: "11 Km\n48 Produtos";}
        ListElement {_id: "0"; nome: "Carrefour"; descricao: "11 Km\n48 Produtos";}
        ListElement {_id: "0"; nome: "Carrefour"; descricao: "11 Km\n48 Produtos";}
        ListElement {_id: "0"; nome: "Carrefour"; descricao: "11 Km\n48 Produtos";}
        ListElement {_id: "0"; nome: "Carrefour"; descricao: "11 Km\n48 Produtos";}
        ListElement {_id: "0"; nome: "Carrefour"; descricao: "11 Km\n48 Produtos";}
        ListElement {_id: "0"; nome: "Carrefour"; descricao: "11 Km\n48 Produtos";}
        ListElement {_id: "0"; nome: "Carrefour"; descricao: "11 Km\n48 Produtos";}
        ListElement {_id: "0"; nome: "Carrefour"; descricao: "11 Km\n48 Produtos";}
        ListElement {_id: "0"; nome: "Carrefour"; descricao: "11 Km\n48 Produtos";}
        ListElement {_id: "0"; nome: "Carrefour"; descricao: "11 Km\n48 Produtos";}
        ListElement {_id: "0"; nome: "Carrefour"; descricao: "11 Km\n48 Produtos";}
        ListElement {_id: "0"; nome: "Carrefour"; descricao: "11 Km\n48 Produtos";}
        ListElement {_id: "0"; nome: "Carrefour"; descricao: "11 Km\n48 Produtos";}
        ListElement {_id: "0"; nome: "Carrefour"; descricao: "11 Km\n48 Produtos";}
        ListElement {_id: "0"; nome: "Carrefour"; descricao: "11 Km\n48 Produtos";}
        ListElement {_id: "0"; nome: "Carrefour"; descricao: "11 Km\n48 Produtos";}
        ListElement {_id: "0"; nome: "Carrefour"; descricao: "11 Km\n48 Produtos";}
        ListElement {_id: "0"; nome: "Carrefour"; descricao: "11 Km\n48 Produtos";}
    }

    delegate: Button {
        width: parent.width

        // foi necessário colocar os valores vindos dos ListElements aqui
        // para poderem ser corretamente utilizados no ButtonStyle
        text: nome

        property string obs: descricao
        property string situacao: status

        onClicked: {
            if(!updating) {
                updating = true;
                applicationWindow.updateFornecedor(_id);
            }
        }

        style: ButtonStyle {
            padding.top: UtilsJS.dp2px(8)
            padding.right:  UtilsJS.dp2px(8)
            padding.bottom:  UtilsJS.dp2px(8)
            padding.left:  UtilsJS.dp2px(8)

            label: Item {
                implicitWidth: row.implicitWidth
                implicitHeight: row.implicitHeight
                Row {
                    id: row
                    anchors.verticalCenter: parent.verticalCenter
                    spacing: UtilsJS.dp2px(8)
                    Rectangle {
                        color: "#ff4444"
                        height: column.height
                        width: height
                        Text {
                            renderType: Text.NativeRendering
                            text: ""
                            color: "#ffffff"
                            font.family: webFont.name
                            font.pixelSize: UtilsJS.dp2px(32)
                            anchors.centerIn: parent
                        }
                    }

                    Column {
                        id: column
                        Text {
                            renderType: Text.NativeRendering
                            text: control.text
                            color: "#555558"
                            font.pixelSize: UtilsJS.dp2px(14)
                            font.bold: true
                        }
                        Text {
                            renderType: Text.NativeRendering
                            text: control.obs
                            color: "#a7a8ab"
                            wrapMode: Text.Wrap
                            font.pixelSize: UtilsJS.dp2px(14)
                        }
                    }
                }
            }

            background: Rectangle {
                border.width: UtilsJS.dp2px(2)
                border.color: control.pressed ? "#33b5e5" : "#ffffff"
                color: control.pressed ? "#ade1f4" : "#ffffff"
            }
        }

    }
}

